<template>
	<view class="center">
		<u-tabs :list="list1" @click="click" lineWidth="100"></u-tabs>

		<template class="two" v-if="SH">
			<view class="" >
				<view class="">
					<u--form labelPosition="left" :model="form" ref="Form" style="margin-bottom: 40rpx;">
						<u-form-item label="组件号" borderBottom :borderBottom="false">
							<u--input v-model="form.moduleId" border="none" inputAlign="right"
								@blur="$u.throttle(getmoduleId, 1000)"></u--input>
							<u-button type="primary" text="重置" size="mini"
								style="width: 200rpx;height: 60rpx;margin-left: 20rpx;" @click="rest1"></u-button>
						</u-form-item>
					</u--form>
				</view>
				<view class="uni-container one">
					<uni-table ref="table1" border type="selection" stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th width="80" align="center">组件ID</uni-th>
							<uni-th align="center" width="80">状态</uni-th>
							<uni-th align="center" width="80">操作</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in arrData" :key="item.moduleId">
							<uni-td align="center">{{ item.moduleId }}</uni-td>
							<uni-td align="center">{{ item.status }}</uni-td>
							<uni-td>
								<view class="uni-group">
									<button class="uni-button" size="mini" type="warn" @click="del(index)">删除</button>
								</view>
							</uni-td>
						</uni-tr>
					</uni-table>
				</view>
				
				<!-- <uni-pagination title="标题文字" :total="total" :pageSize="10" @change="pages"></uni-pagination> -->
				<view class="button" @click="stock">
					<span>确定出库</span>
				</view>
			</view>
		</template>
<!-- 		<view >

		</view> -->

		<template v-else>
			<view class="" >
				<u--form labelPosition="left" :model="formData" ref="uForm" style="margin-bottom: 40rpx;">
					<u-form-item label="托盘号" borderBottom :borderBottom="false">
						<u--input v-model="formData.palletNo" border="none" inputAlign="right"
							@blur="$u.throttle(getData, 1000)"></u--input>
						<u-button type="primary" text="重置" size="mini"
							style="width: 200rpx;height: 60rpx;margin-left: 20rpx;" @click="rest"></u-button>
					</u-form-item>
				</u--form>
				<view class="uni-container">
					<uni-table ref="table" border stripe type="selection" emptyText="暂无更多数据"
						@selection-change="selectionChange">
						<uni-tr>
							<uni-th width="80" align="center">组件ID</uni-th>
							<uni-th align="center" width="80">状态</uni-th>
						</uni-tr>
						<uni-tr v-for="(item,index) in tableData" :key="index">
							<uni-td align="center">{{ item.moduleId }}</uni-td>
							<uni-td align="center">{{ item.status }}</uni-td>
						</uni-tr>
					</uni-table>
					<template>
						<uni-pagination title="标题文字" :total="total1" :pageSize="10" @change="pages1" :current="current" style="margin-top: 40rpx;"></uni-pagination>
					</template>
				</view>
				
				<view class="button" @click="submit">
					<span>确定出库</span>
				</view>
			</view>
		</template>
<!-- 		<view class="" >

		</view> -->




		<u-loading-page :loading="show" loading-text="正在出库中..."></u-loading-page>


	</view>

</template>

<script>
	import {
		getData,
		dictionaries,
		stockRemoval,
		getmoduleId,
		putShipment
	} from '@/api/stockRemoval/subassembly/index.js'
	export default {
		data() {
			return {
				current:1,
				total:0,
				total1:0,
				// 组件
				tableData: [],
				SH: true,
				list1: [{
						name: '根据组件号出库'
					},
					{
						name: '根据托盘号出库',

					}
				],

				show: false,
				index: [],
				formData: {
					pageNum: 1,
					id: [],
					palletNo: '' // 托盘号
				},
				form: {
					moduleId: '' //组件号
				},

				// 
				arrData: [],
				rules: [],
				arr: [] //状态字典
			}
		},
		onReady() {},
		created() {
			this.zd()
		},

		methods: {
			// 分页器
			pages(e){
				console.log(e);
			},
			pages1(e){
				this.formData.pageNum = e.current
				this.current = e.current
				this.getData()
			},
			// 删除
			del(index) {
				this.arrData.splice(index, 1)
			},
			// 托盘重置按钮
			rest() {
				this.formData = {
					pageNum: 1,
					id: [],
					palletNo: ''
				}
				this.tableData = []
				this.total1 = 0
				this.current = 1
				console.log(this.total1);
			},
			// 组件重置按钮
			rest1() {
				this.form = {
					moduleId: '' //组件号
				}
				this.arrData = []
			},
			// 切换面板
			click(item) {
				if (item.index === 0) {
					this.SH = true
				} else {
					this.SH = false
				}
				// this.SH = true
			},
			// 多选
			selectionChange(e) {
				// 存入选中的每项的下标
				this.index = e.detail.index
			},
			zd() {
				// 状态字典
				dictionaries('warehouse_status').then(res => {
					this.arr = res.data
				})
			},
			// 获取托盘组件信息
			getData() {
				if (this.formData.palletNo) {
					// const palletNo = this.formData.palletNo
					getData(this.formData).then(res => {
						if (res.rows) {
							this.total1 = res.total
							if (res.rows.length >= 1) {
								this.tableData = res.rows
								// 状态转中文
								this.tableData.forEach((k, y) => {
									this.arr.forEach((item, index) => {
										if (this.tableData[y].status == item.priSourcename) {
											this.tableData[y].status = item.priDisplayname
										}
									})
								})
							} else {
								uni.showToast({
									icon: 'error',
									title: '托盘号不存在！'
								})
							}
						} else {
							uni.showToast({
								icon: 'error',
								title: res.msg
							})
						}
						// ---------------------------------------

					})
				}
			},
			// 提交出库
			async submit() {
				if (this.index.length >= 1) {
					// 找到每一项的id
					await this.index.forEach(item => {
						this.formData.id.push(this.tableData[item].id)
					})
					// 将数组id转字符串
					let id = this.formData.id.join(',')
					let palletNo = this.formData.palletNo
					stockRemoval({
						id,
						palletNo
					}).then(res => {
						if (res.code == 200) {
							this.show = true
							setTimeout(() => {
								this.show = false
								uni.showToast({
									icon: 'success',
									title: '出库成功！'
								})
							}, 1000)

						}
					})
					// 清空下标
					this.index = []

					// 清除选中状态
					this.$refs.table.clearSelection()
					// 
					this.formData.id = []
					// 刷新页面
					setTimeout(()=>{
						this.getData()
					},500)
				} else {
					uni.showToast({
						icon: 'error',
						title: '请先选择组件！'
					})
				}
			},
			// 获取组件信息
			getmoduleId() {
				if (this.form.moduleId) {
					let moduleId = this.form.moduleId
					getmoduleId({
						moduleId
					}).then(res => {

						if (res.rows) {
							if (res.rows.length >= 1) {
								this.arrData.forEach((k, y) => {
									res.rows.forEach((item, index) => {
										if (k.moduleId == item.moduleId) {
											res.rows.splice(index, 1)
										}
									})

								})

								res.rows.forEach((item, index) => {
									this.arrData.push(item)
								})
								// 状态转中文
								this.arrData.forEach((k, y) => {
									this.arr.forEach((item, index) => {
										if (this.arrData[y].status == item.priSourcename) {
											console.log(this.arrData[y].status);
											this.arrData[y].status = item.priDisplayname

										}
									})
								})
							} else {
								uni.showToast({
									icon: 'error',
									title: '组件号不存在'
								})
							}
						} else {
							uni.showToast({
								icon: 'error',
								title: res.msg
							})
						}
					})
				}
			},
			// 组件出库
			stock() {
				let id = [];
				this.arrData.forEach((item) => {
					id.push(item.id);
				});
				id = id.join(",");
				putShipment({
					id
				}).then((response) => {
					if (response.code == 200) {
						this.show = true
						setTimeout(() => {
							this.show = false
							uni.showToast({
								icon: 'success',
								title: '组件出库成功！'
							})
						}, 1000)
						this.rest1();
					}
				});

			}
		}
	}
</script>

<style lang="scss">
	::v-deep .checkbox__inner {
		z-index: 0 !important;
	}

	::v-deep .u-loading-page {
		z-index: 100 !important;
	}

	.center {
		padding: 0 20rpx;
	}

	::v-deep .u-form-item {
		margin-top: 20rpx;
		height: 96rpx;
		opacity: 1;
		border-radius: 12rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 8rpx 0px rgba(30, 36, 54, 0.03);

	}

	::v-deep .u-form-item__body__left {
		width: 150rpx !important;
		padding-left: 20rpx;
	}

	::v-deep .u-form-item__body__right {
		padding-right: 20rpx;
	}

	.button {
		margin: 96rpx auto;
		width: 100%;
		height: 96rpx;
		opacity: 1;
		border-radius: 120rpx;
		background: linear-gradient(90deg, rgba(17, 171, 247, 1) 0%, rgba(64, 118, 254, 1) 100%);

		span {
			display: block;
			width: 128rpx;
			height: 48rpx;
			opacity: 1;
			/** 文本1 */
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 96rpx;
			color: rgba(255, 255, 255, 1);
			margin: 0 auto;
		}
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.one {
		::v-deep .checkbox {
			display: none !important;
		}
	}
	::v-deep .is-pc-hide{
		padding: 0 40rpx !important;
	}
</style>